<template>
  <div class="login">
    <div class="input_div" >
      <input 
        type="text" 
        placeholder="用户名" 
        class="account"
        @blur="checkEmpty($event,'用户名')"
        v-model="formLogin.username"
        ref="account">
      <!-- <span>{{msg}}不能为空</span> -->
      <div class="Password">
        <img id="demo_img" src="@/assets/img/l_r/密码不可见.svg" @click="hideShowPsw">
        <input 
          type="password"
          placeholder="密码" 
          @blur="checkEmpty($event,'密码')"
          class="password" 
          id="demo_input"
          v-model="formLogin.password">
      </div>
      <div class="comfirmCode">
        <input 
        type="text"
        placeholder="请输入验证码"
        v-model="formLogin.code"
        >
        <div @click="changeCode"><img :src="qrcodeSrc" id="qrcodeSrc"></div>
      </div>
      <!-- <div class="forget"><a>忘记密码</a></div> -->
    </div>
    <button class="login_button" @click="login"><strong>登&nbsp;录</strong></button>
    <!-- <div class="other-login">
      <div class="tip">
        <span class="left"></span>
        <span>其他方式</span>
        <span class="right"></span>
      </div>
      <div class="other">
        <div class="QQ"></div>
        <div class="wechat"></div>
        <div class="weibo"></div>
      </div>
    </div> -->
    
  </div>
</template>

<script>
// 如何解决vue软键盘破坏页面布局问题(需要运用jQuery，未测试是否可行)
// var winHeight = $(window).height();
// $(window).resize(function() {
//     var thisHeight = $(this).height();
//     var keyboardHeight = thisHeight - winHeight;
//     $(".需要定位的class名/ id").css({ 'bottom': keyboardHeight + 'px' });
// });
import { getLogin,getCode } from '@/network/l_r';
import { setToken } from '@/network/token';
import axios from 'axios';

export default {
  name:'Login',
  data() {
    return {
      demoImg:{},
      demoInput:{},
      // 用户登录信息
      formLogin: {
        username: '',
        password: '',
        code:''
      },
      // 验证码图片路径
      qrcodeSrc: 'http://47.103.199.147:8888/user/verifyCode'
    }
  },
  mounted() {
    this.changeCode()
  },
  methods: {
    // 发送登录请求
    async login(){
      this.$refs.account
      const res = await getLogin(this.formLogin.username,this.formLogin.password,this.formLogin.code);
      if(res.data.code == 200){
        alert('登录成功')  
        this.formLogin = {
          username: '',
          password: '',
          code:''
        },
        setToken(res.data.data.token)//把token存到浏览器
        localStorage.setItem('user',JSON.stringify(res.data.data.user))//把用户名存到浏览器
        this.$router.replace('/home')
      }else if(res.data.code == 401){
        alert('用户名或密码错误')
      }else{
        alert('验证码错误')
      }
    },
    // login(){
    //   let userName = this.formLogin.username
    //   let password = this.formLogin.password
    //   let code = this.formLogin.code
    //   console.log(code);
    //   let params = {
    //   userName,
    //   password,
    //   code
    //  };
    //   axios.post('http://ghwqbk.natappfree.cc/user/login',params).then(
    //     res => {
    //       console.log('请求成功');
    //       console.log(res);
    //     })
    //   }, 
    
    // 判断输入框内容是否为空
    checkEmpty(e,msg){
      if(e.target.value == '')
      {
        alert(`${msg}不能为空`)
        return
      }
    },
    // 获取验证码
    async changeCode(){
      this.qrcodeSrc = this.qrcodeSrc
      const res =await getCode()
      // console.log(res);
      let imgType = res.headers['content-type'];
      let blob = new Blob([res.data],{type:imgType});
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
      this.qrcodeSrc = imageUrl;
    },
    hideShowPsw(){
        // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
        this.demoImg = document.getElementById("demo_img"),
        this.demoInput = document.getElementById("demo_input")
        if (this.demoInput.type == "password") {
            this.demoInput.type = "text";
            this.demoImg.src = require('@/assets/img/l_r/密码可见.svg');
        }else {
            this.demoInput.type = "password";
            this.demoImg.src = require('@/assets/img/l_r/密码不可见.svg');
        }
    }
  },
}

</script>

<style scoped>
/* 登录样式 */
  .login{
    position: absolute;
    left: 33.75px;
    right:33.75px;
    height: calc(60vh - 53px);

    display: flex;
    flex-direction: column;
    justify-content:space-around;
    /* background-color: red; */
  }

/* 输入框容器样式 */
  .input_div{
    position: relative;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content:space-around
  }

/* 输入框样式 */
  .login .input_div input{
    height: 40px;
    border-radius: 20px;
    border: 1px solid #888888;
    padding: 15px;
    outline: none;
    position: relative;
  }

  /* 验证码大盒子样式 */
  .comfirmCode{
    display: flex;
    justify-content:space-between
  }
  /* 验证码输入框样式 */
  .comfirmCode input{
    width: 130px;
  }
  /*验证码图片样式  */
  .comfirmCode img{
    height: 40px;
  }
/*显示隐藏显示密码图片*/
  .Password {
    position: relative;
  }
  
/*  设置密码输入框样式 */
  .password {
    height: 40px;
    width: 100%;
    border-radius: 20px;
    border: 1px solid #888888;
    padding: 15px;
    outline: none;
    position: relative; 
  }
/* 设置忘记密码内边距 */
  .input_div .forget{
    padding: 0 10px;
  }

  /* 忘记密码样式 */
  .input_div .forget a{
    float: right;
    color: var(--color-tint);
    font-size: 14px;
    right: 0;
  }

/* 设置输入账号框图标 */
   .login .account{
    background:url(assets/img/l_r/账号.svg) no-repeat 8px;
    background-size: 25px;
    text-indent: 20px;
  }

/* 设置输入密码框图标 */
  .login .password{
    background:url(assets/img/l_r/密码.svg) no-repeat 10px;
    background-size: 20px;
    text-indent: 20px;
  }

  #demo_img{
  width: 40px;
  height: 25px;
  position: absolute;  
  top: 50%;
  right: 0px; 
  transform: translate(0,-50%);
  margin-right: 15px; 
  display: block;
  z-index: 999;
  }


/* 登录按钮样式 */
  .login_button{
    background: url(assets/img/l_r/渐变色.jpg) no-repeat;
    background-size: 100% 100%;
    height: 44px;
    width: 187.5px;
    border-radius: 20px;
    margin: 0 auto;
    border: none;
    color: white;
    font-size: 18px;
  }


  .login .tip{
    width: 240px;  
    display: flex;
    justify-content:space-between;


    font-size: 11px;
    color: #666;
    margin-bottom: 15px;
  }

/* 设置提示文字左渐变样式 */
  .login .tip .left{
    width: 75px;
    height: 2px;    
    background-image: linear-gradient(to right, white , #666666);
    margin-top: 6px;
    /* margin-left: 12px; */
  }

/* 设置提示文字右渐变样式 */
  .login .tip .right{
    width: 75px;
    height: 2px;    
    background-image: linear-gradient(to left,white , #666666);
    margin-top: 6px;
    /* margin-right: 12px; */
  }

/* 设置其它登录方式为弹性盒子 */
  .login .other{
    display: flex;
    justify-content: space-around;
    width: 240px;
    margin: 0 auto;
  }


  .other .QQ{
    height: 33.75px;
    width: 33.75px;
    background: url(assets/img/l_r/QQ.svg) no-repeat;
    background-size: 9vw;
  }

  .other .wechat{
    height: 33.75px;
    width: 33.75px;
    background: url(assets/img/l_r/微信.svg) no-repeat;
    background-size: 33.75px;
  }

  .other .weibo{
    height: 33.75px;
    width: 33.75px;
    background: url(assets/img/l_r/微博.svg) no-repeat;
    background-size: 33.75px;
  }
</style>